import React, { useCallback, useEffect } from 'react';
import useDraft from '@/hooks/useDraft';

import styles from './useDraft.css';

interface IState {
  a: number;
  b: number;
  c?: number;
}

const initState: IState = { a: 1, b: 2 };

/**
 * 演示在 useDraft 中的 setDraft 中使用 immer 模式直接修改或返回新的状态
 */
export default function UseDraft() {
  const [state, setDraft] = useDraft(initState);

  // 直接设置state属性的范例
  const onChangeDraft = useCallback(() => {
    setDraft((v: IState) => {
      v.a += 1;
      v.b -= 1;
    });
  }, []);

  // 直接增加state属性的范例
  const onChangeDraftAdd = useCallback(() => {
    setDraft((v: IState) => {
      v.c = v.a * v.a + v.b * v.b;
    });
  }, []);

  // 完全更新state范例
  const onReplaceDraft = useCallback(() => {
    setDraft(() => ({ a: 0, b: 0, c: 0 }));
  }, []);

  // 完全重置state范例
  const onResetDraft = useCallback(() => {
    setDraft(() => initState);
  }, []);

  // 延迟 double 范例
  useEffect(() => {
    setTimeout(() => setDraft((v: IState) => { v.a *= 2; }), 1000,);
  }, [state.c]);

  return (
    <div className={styles.normal}>
      <h1>Page useDraft</h1>
      <ul>
        <li>{state.a}</li>
        <li>{state.b}</li>
        <li>{state.c}</li>
      </ul>
      <button onClick={onChangeDraft}>onChangeDraft</button>
      <button onClick={onChangeDraftAdd}>onChangeDraftAdd</button>
      <button onClick={onReplaceDraft}>onReplaceDraft</button>
      <button onClick={onResetDraft}>onResetDraft</button>
    </div>
  );
}
